<template>
	<div class="app-container" style="margin-top: -20px;padding: 0;">
		<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="地区" prop="areaId">
				<el-cascader v-model="queryParams.areaId" :options="areaOptions"
					:props="{ value: 'id', label: 'label', children: 'children', emitPath: false }" placeholder="请选择地区" clearable
					filterable :show-all-levels="false" />
			</el-form-item>
			<el-form-item label="名称" prop="name">
				<el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
				<el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<slot name="button"></slot>

		<el-table v-loading="loading" :data="stationList" ref="multipleTableRef" @select="handleSelect"
			@selection-change="handleSelectionChange" @row-click="handleRowClick" max-height="300">
			<el-table-column type="selection" width="30" align="center" fixed="left" />
			<el-table-column label="地区" align="left" prop="areaName" />
			<el-table-column label="名称" align="left" prop="name" />
			<el-table-column label="备注" align="left" prop="remark" />
			<!-- <el-table-column label="经度" align="left" prop="longitude" />
            <el-table-column label="纬度" align="left" prop="latitude" /> -->
		</el-table>

		<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
			@pagination="getList" />
	</div>
</template>
<script setup name="StationTable">
import { listStation } from "@/api/basic/station";
import { areaTreeSelect } from "@/api/basic/area";

const { proxy } = getCurrentInstance();
const props = defineProps({
	queryParams: {
		type: Object,
		default(rawProps) {
			return {
				pageNum: 1,
				pageSize: 10,
				areaId: null,
				name: null,
				status: null,
			}
		}
	}
})

const stationList = ref([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const areaOptions = ref([])
const multipleTableRef = ref()
const data = reactive({
	selectData: [],
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		areaId: undefined,
		name: undefined,
		status: undefined,
	},
});

const { queryParams } = toRefs(data);

/** 查询地区下拉树结构 */
function getAreaTree() {
	areaTreeSelect().then(response => {
		areaOptions.value = response.data;
	})
}

/** 查询站点列表 */
function getList() {
	loading.value = true;
	listStation(queryParams.value).then(response => {
		stationList.value = response.rows;
		total.value = response.total;
		loading.value = false;
	});
}

/** 搜索按钮操作 */
function handleQuery() {
	queryParams.value.pageNum = 1;
	getList();
}

/** 重置按钮操作 */
function resetQuery() {
	proxy.resetForm("queryRef");
	handleQuery();
}

// 表格某一行的单击事件
function handleRowClick(row) {
	clearChoose()
	multipleTableRef.value.toggleRowSelection(row, true);

	const [_choosed] = data.selectData

	emit('emitStationData', _choosed)
}

// 手动勾选数据行的选择框时触发
function handleSelect(selection, row) {
	// 清除所有勾选项
	clearChoose()
	multipleTableRef.value.toggleRowSelection(row, true)

	const [_choosed] = data.selectData
	emit('emitStationData', _choosed)
}

// 多选框选中数据
function handleSelectionChange(selection) {
	data.selectData = selection
}

// 清除所有勾选项
function clearChoose() {
	multipleTableRef.value.clearSelection()
}

const emit = defineEmits(['emitStationData'])

getAreaTree();

defineExpose({
	clearChoose
})

watch(() => props.queryParams, (newVal, oldVal) => {
	console.log(newVal, oldVal)
	queryParams.value.name = newVal.name;
	if (typeof oldVal != 'undefined') {
		clearChoose();
	}
	getList();
}, { immediate: true })

</script>
<style scoped>
:deep(.el-table th.el-table__cell:nth-child(1) .cell) {
	visibility: hidden;
}
</style>